//生成线性图
function genLineChart(divID, title, xAxisData, legendData, yAxisData, valueType, subtitle) {
	var options = {
		 chart: {
			renderTo: divID,
			type: 'spline',
			width: document.body.clientWidth-349
		 },
		 title: {
			text: "<b>" + title + "</b>"
		 },
		subtitle: {
			text: subtitle
		},
		 xAxis: {
			type: 'datetime',
			maxZoom: 24 * 3600000, // one days
			dateTimeLabelFormats: {
				second: '%H:%M:%S',
				minute: '%H:%M',
				hour: '%m-%e',
				day: '%m-%e',
				week: '%m-%e',
				month: '%m \'%y',
				year: '%Y'
			}
		 },
		 yAxis: {
			min: 0,
			allowDecimals: false,
			title: {
				text: ''
			}
		 },

		tooltip: {
			crosshairs: {
				width: 2,
				color: 'gray',
				dashStyle: 'shortdot'
			},
	        shared: true,
			formatter: function() {
				var objLen = 0; 
				$.each(this.points, function(l, point) {
					objLen++;
				});
				var s = '<b style="line-height: 20px;">'+ Highcharts.dateFormat('%Y-%m-%d (', this.x) + getDay2(Highcharts.dateFormat('%a', this.x))+ ')</b>';
				$.each(this.points, function(i, point) {
					if((objLen > 15 && this.point.y != 0) || objLen <= 15)
						s += '<br><span style="line-height: 15px; color:'+ point.series.color + ' ">'+ point.series.name +': '+
							addCommas(point.y) + "</span>";
				});	
				return s;
			}
		},					 
		series: []
	};

	$.each(legendData, function(i, value) {
		var series = {};
		series.pointInterval = 24 * 3600 * 1000;		
		series.pointStart = Date.UTC(xAxisData[0].substring(0,4), xAxisData[0].substring(5,7)-1,xAxisData[0].substring(8,10));
		series.name = value;
		series.data = yAxisData[i][valueType];
		options.series.push(series);
	});
	
	//趋势分析图表
	 var lineChart = new Highcharts.Chart(options);		
}

//生成平台详情线形图
function genDetailLineChart(divID, title, xAxisData, legendData, yAxisData, valueType, subtitle) {
	var options = {
		 chart: {
			renderTo: divID,
			type: 'spline',
			width: document.body.clientWidth-349
		 },
		 title: {
			text: title
		 },
		subtitle: {
			text: subtitle
		},
		 xAxis: {
			type: 'datetime',
			maxZoom: 24 * 3600000, // one days
			dateTimeLabelFormats: {
				second: '%H:%M:%S',
				minute: '%H:%M',
				hour: '%m-%e',
				day: '%m-%e',
				week: '%m-%e',
				month: '%m \'%y',
				year: '%Y'
			}
		 },
		 yAxis: [{
					min: 0,
					allowDecimals: false,
					title: {
						text: ''
					}
				}, {
					min: 0,
					allowDecimals: false,
					opposite: true,
					labels: {
						style: {
						   color: '#89A54E'
						}
					},
					title: {
						text: 'VV/UV',
						style: {
						   color: '#89A54E'
						}
					}			
				}],
		tooltip: {
			crosshairs: {
				width: 2,
				color: 'gray',
				dashStyle: 'shortdot'
			},
	        shared: true,
			formatter: function() {
				var s = '<b style="line-height: 20px;">'+ Highcharts.dateFormat('%Y-%m-%d (', this.x) + getDay2(Highcharts.dateFormat('%a', this.x))+ ')</b>';
				
				$.each(this.points, function(i, point) {
					s += '<br><span style="line-height: 15px; color:'+ point.series.color + ' ">'+ point.series.name +': '+
						addCommas(point.y) + "</span>";
				});	
				return s;
			}
		},					 
		series: []
	};



	$.each(legendData, function(i, value) {
		if (value)
		{
			var series = {};
			series.pointInterval = 24 * 3600 * 1000;
			series.pointStart = Date.UTC(xAxisData[0].substring(0,4), xAxisData[0].substring(5,7)-1,xAxisData[0].substring(8,10));
			series.name = value;
			series.data = yAxisData[valueType][i];
			if (i == 7)
			{
				series.yAxis = 1;
				series.color = '#89A54E';
				series.dashStyle = 'shortdot';
			}
			options.series.push(series);
		}
	});
	
	//趋势分析图表
	 var lineChart = new Highcharts.Chart(options);		
}


//计算每日增幅率
function genTableResultInc(data, valueType, l) {
	var incRate = 0;
	var arrow = "";
	if (l > 0)
		incRate = Highcharts.numberFormat((data[valueType][l] - data[valueType][l-1])/data[valueType][l-1]*100, 1);
	else
		incRate = 0;

	if (incRate > 0)
		arrow = "<span class='inc_tag' title='" + incRate +"%'><b> ↑ </b></span>";
	else if (incRate < 0)
		arrow = "<span class='des_tag' title='" + incRate +"%'><b> ↓ </b></span>"
	else 
		arrow = "<span style='margin-left: 5px;' title='" + incRate +"%'><b> - </b></span>"
	
	if (valueType ==7)
		return "<td style='text-align:right;'>" + addCommas(roundNumber(data[valueType][l], 2)) + arrow + "</td>";
	else 
		return "<td style='text-align:right;'>" + addCommas(data[valueType][l]) + arrow + "</td>";
}

function genTableResultInc2(firData, secData, valueType, l) {
	var incRate = 0;
	var arrow = "";
	if (l > 0)
		incRate = Highcharts.numberFormat((secData - firData)/firData*100, 1);
	else
		incRate = 0;

	if (incRate > 0)
		arrow = "<span class='inc_tag' title='" + incRate +"%'><b> ↑ </b></span>";
	else if (incRate < 0)
		arrow = "<span class='des_tag' title='" + incRate +"%'><b> ↓ </b></span>"
	else 
		arrow = "<span style='margin-left: 5px;' title='" + incRate +"%'><b> - </b></span>"
	
	if (valueType ==7)
		return "<td style='text-align:right;'>" + addCommas(roundNumber(secData, 2)) + arrow + "</td>";
	else 
		return "<td style='text-align:right;'>" + addCommas(secData) + arrow + "</td>";
}

//表格排序
var tempCol = "";
var tempDesc = true;
function tableSorting(id, col) {
	var reg = "";
	if (tempCol == col) {
		if (tempDesc)
			tempDesc = false;
		else
			tempDesc = true;
	}
	else {	
		tempDesc = true;
		tempCol = col;
	}

	$(".desc_table").removeClass("desc_table");
	$(".asc_table").removeClass("asc_table");
	if (tempDesc)
		$("#"+id+"th"+col).addClass("desc_table");
	else
		$("#"+id+"th"+col).addClass("asc_table");

	if (col == 1)
		reg = /\//-/g/;
	else
		reg = /^[0-9,.]+/mg;

	$('#' + id + "X").sortTable({
		onCol: col, 
		sortType: 'numeric', 
		sortDesc: tempDesc, 
		regexp: reg, 
		regexpIndex: 0, 
		keepRelationships: true
	});

}


//生成表格
function genTable(divID, xAxisData, yAxisData, datas, valueType) {
	var table = "<div class=\"csv-box-header\"><strong>每日明细</strong><div class=\"mnum\" style=\"color:#444\"><a href=\"javascript:getCSVData('" +divID+ "X');\" >输出CSV文件</a><a href=\"javascript:getCSVData('" +divID+ "X');\"><img src=\"resources/images/csv.png\" style=\"vertical-align: middle;\" \></a></div></div>";
	table += "<table class='new_silver_table' id='" + divID + "X'><thead><tr><th class='new_silver_first_n asc_table' style='cursor: pointer;' id='"+divID+"th1' onclick=\" tableSorting('"+divID+"', 1); \">日期</th>";
	var tmpDate = new Date();
	var rowClass = "";
	var totalResult = new Array();
	$.each(xAxisData, function(i, value) {
		var x = i+2;
		table += "<th style='cursor: pointer;' id='"+divID+"th"+ x +"' onclick=\" tableSorting('"+divID+"', " + x + " ); \">"+value+"</th>";
	});
	if (valueType == 7)
		table += "<th style='cursor: pointer;' id='"+divID+"th"+ (xAxisData.length+2) +"' onclick=\" tableSorting('"+divID+"', " + (xAxisData.length+2) + " ); \">单日平均值</th></tr></thead><tbody>";
	else
		table += "<th style='cursor: pointer;' id='"+divID+"th"+ (xAxisData.length+2) +"' onclick=\" tableSorting('"+divID+"', " + (xAxisData.length+2) + " ); \">单日累计</th></tr></thead><tbody>";

	for(i=0; i<xAxisData.length; i++)
		totalResult.push(0);
	var firTotal = 0, secTotal = 0, dayTotal = 0;
	$.each(yAxisData, function(l, date) {
		firTotal = secTotal;
		secTotal = 0;
		if (l%2 == 1)
			rowClass = "new_silver_odd";
		else
			rowClass = "new_silver_even";
		tmpDate.setFullYear(date.substring(0,4), date.substring(5,7)-1,date.substring(8,10));
		table += "<tr class='"+rowClass+"'><td class='new_silver_first_n'>"+date+" ("+ getDay(tmpDate)+")</td>";
		$.each(datas, function(m, data){
			table += genTableResultInc(data, valueType, l);
			totalResult[m] += data[valueType][l];
			secTotal += data[valueType][l];
		});
		if (valueType == 7)
			secTotal = secTotal/datas.length;
		dayTotal += secTotal;

		table += genTableResultInc2(firTotal, secTotal, valueType, l);
		table += "</tr>";
	});	
	
	if (valueType == 7)
	{
		table += "</tbody><thead><tr><th class='new_silver_first_n'>平均值</th>";
		for(i=0; i<totalResult.length; i++) 
			table += "<th style='text-align:right;'>" + addCommas((totalResult[i]/yAxisData.length).toFixed(2)) + "</th>";
		table += "<th style='text-align:right;'>" + addCommas((dayTotal/yAxisData.length).toFixed(2)) + "</th>";
	}
	else {
		table += "</tbody><tfoot><tr><td class='new_silver_first_n'>合计</td>";
		for(i=0; i<totalResult.length; i++)
			table += "<td style='text-align:right;'>" + addCommas(totalResult[i]) + "</td>";
		table += "<td style='text-align:right;'>" + addCommas(dayTotal) + "</td>";
	}
	table += "</tr></tfood></table>";
	$("#"+divID).html(table);

	tr_hover($(".new_silver_table tr"), "current");
}



//生成平台详细表格
function genDetailTable(divID, xAxisData, yAxisData, datas, valueType, tableType) {
	var tmpDate = new Date();
	var table = "<div class=\"csv-box-header\"><strong>每日明细</strong><div class=\"mnum\" style=\"color:#444\"><span><a href=\"javascript:getCSVData('" +divID+ "X');\" >输出CSV文件</a></span><a href=\"javascript:getCSVData('" +divID+ "X');\"><img src=\"resources/images/csv.png\" style=\"vertical-align: middle;\" \></a></div></div>";
	table += "<table class='new_silver_table' id='" + divID + "X'><thead><tr><th style='cursor: pointer;' class='new_silver_first_n asc_table' id='"+divID+"th1' onclick=\" tableSorting('"+divID+"', 1); \">日期</th>";
	var rowClass = "";
	var uv=0, vv=0, pv=0, nu=0, nr=0, su=0, vvuv=0;

//	$.each(xAxisData, function(i, value) {
//		table += "<th>"+value+"</th>";
//	});
	if (tableType == 0)
		table += "<th style='cursor: pointer;' id='"+divID+"th"+ 2 +"' onclick=\" tableSorting('"+divID+"', " + 2 + "); \">每日使用设备数(UV)</th><th style='cursor: pointer;' id='"+divID+"th"+ 3 +"' onclick=\" tableSorting('"+divID+"', " + 3 + "); \">每日新增设备数(NU)</th><th style='cursor: pointer;' id='"+divID+"th"+ 4 +"' onclick=\" tableSorting('"+divID+"', " + 4 + "); \">每日播放总数(VV)</th><th style='cursor: pointer;' id='"+divID+"th"+ 5 +"' onclick=\" tableSorting('"+divID+"', " + 5 + "); \">每日页面访问量(PV)</th><th style='cursor: pointer;' id='"+divID+"th"+ 6 +"' onclick=\" tableSorting('"+divID+"', " + 6 + "); \">VV/UV</th>";
	else if (tableType == 1)
		table += "<th style='cursor: pointer;' id='"+divID+"th"+ 2 +"' onclick=\" tableSorting('"+divID+"', " + 2 + "); \">每日使用设备数(UV)</th><th style='cursor: pointer;' id='"+divID+"th"+ 3 +"' onclick=\" tableSorting('"+divID+"', " + 3 + "); \">每日新增设备数(NU)</th><th style='cursor: pointer;' id='"+divID+"th"+ 4 +"' onclick=\" tableSorting('"+divID+"', " + 4 + "); \">每日播放总数(VV)</th><th style='cursor: pointer;' id='"+divID+"th"+ 5 +"' onclick=\" tableSorting('"+divID+"', " + 5 + "); \">每日注册用户数(NR)</th><th style='cursor: pointer;' id='"+divID+"th"+ 6 +"' onclick=\" tableSorting('"+divID+"', " + 6 + "); \">每日成功上传量(SU)</th><th style='cursor: pointer;' id='"+divID+"th"+ 7 +"' onclick=\" tableSorting('"+divID+"', " + 7 + "); \">VV/UV</th>";

	table += "</tr></thead><tbody>";
	
	$.each(yAxisData, function(l, date) {
		if (l%2 == 1)
			rowClass = "new_silver_odd";
		else
			rowClass = "new_silver_even";
		tmpDate.setFullYear(date.substring(0,4), date.substring(5,7)-1,date.substring(8,10));



		table += "<tr class='"+rowClass+"'><td class='new_silver_first_n'>"+date+" ("+ getDay(tmpDate)+")</td>";
		if (tableType == 0) {
			table += genTableResultInc(datas[valueType], 1, l);
			table += genTableResultInc(datas[valueType], 3, l);
			table += genTableResultInc(datas[valueType], 0, l);
			table += genTableResultInc(datas[valueType], 2, l);
			table += genTableResultInc(datas[valueType], 7, l);
		}
		else if (tableType == 1) {
			table += genTableResultInc(datas[valueType], 1, l);
			table += genTableResultInc(datas[valueType], 3, l);
			table += genTableResultInc(datas[valueType], 0, l);
			table += genTableResultInc(datas[valueType], 4, l);
			table += genTableResultInc(datas[valueType], 5, l);
			table += genTableResultInc(datas[valueType], 7, l);
		}
		vv += datas[valueType][0][l];
		uv += datas[valueType][1][l];
		pv += datas[valueType][2][l];
		nu += datas[valueType][3][l];
		nr += datas[valueType][4][l];
		su += datas[valueType][5][l];
		vvuv += datas[valueType][7][l];



//		$.each(datas[valueType], function(m, data){
//			if (m < xAxisData.length)
//				table += "<td style='text-align:right;'>" + addCommas(data[l]) + "</td>";
//		});
		table += "</tr>";
	});

	if (tableType == 0)
		table += "</tbody><tfoot><tr><td class='new_silver_first_n'>合计</td><td style='text-align:right;'>" + addCommas(uv) + "</td><td style='text-align:right;'>" + addCommas(nu) + "</td><td style='text-align:right;'>" + addCommas(vv) + "</td><td style='text-align:right;'>" + addCommas(pv) + "</td><td style='text-align:right;'>平均" + addCommas((vvuv/yAxisData.length).toFixed(2)) + "</td></tr></tfoot></table>";
	else if (tableType == 1)
		table += "</tbody><tfoot><tr><td class='new_silver_first_n'>合计</td><td style='text-align:right;'>" + addCommas(uv) + "</td><td style='text-align:right;'>" + addCommas(nu) + "</td><td style='text-align:right;'>" + addCommas(vv) + "</td><td style='text-align:right;'>" + addCommas(nr) + "</td><td style='text-align:right;'>" + addCommas(su) + "</td><td style='text-align:right;'>平均" + addCommas((vvuv/yAxisData.length).toFixed(2)) + "</td></tr></tfoot></table>";

	$("#"+divID).html(table);

	tr_hover($(".new_silver_table tr"), "current");

}



//生成饼图
function genPieChart(divID, title, legendData, datas, valueType, subtitle){
	var options = {
		chart: {
			renderTo: divID,
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
			width: document.body.clientWidth-349
		},
		title: {
			text: title
		},
		subtitle: {
			text: subtitle
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) + "% (" + addCommas(this.y) +')';
			}
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					color: '#000000',
					connectorColor: '#000000',
					formatter: function() {
						return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) + "% (" +  addCommas(this.y) +')';
					}
				}
			}
		},
		series: []				
	};
	
	var series = {
		type: 'pie',
		name: title,
		data: []
	};
	$.each(legendData, function(i, name) {
		var sum = 0;
		$.each(datas[i][valueType], function(l, data) {
			sum += data;
		});
		series.data.push([name, sum]);
	});	

	options.series.push(series);
	sumPieChart = new Highcharts.Chart(options);
}

// 生成累计使用设备数饼图
function genTotalUserPieChart(divID, title, subtitle){
	var options = {
		chart: {
			renderTo: divID,
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
			width: document.body.clientWidth-349
		},
		title: {
			text: title
		},
		subtitle: {
			text: subtitle
		},
		tooltip: {
			formatter: function() {
				return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) + "% (" +  addCommas(this.y) +')';
			}
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					color: '#000000',
					connectorColor: '#000000',
					formatter: function() {
						return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) + "% (" +  addCommas(this.y) +')';
					}
				}
			}
		},
		series: []				
	};
	
	var series = {
		type: 'pie',
		name: "累计使用设备数",
		data: userTotalArr
	};

	options.series.push(series);
	sumPieChart = new Highcharts.Chart(options);
}


//生成面积图
function genAreaChart(divID, title, xAxisData, legendData, yAxisData, valueType, subtitle) {

	var options = {
		 chart: {
			renderTo: divID,
			defaultSeriesType: 'area',
			width: document.body.clientWidth-349
		 },
		 title: {
			text: title
		 },
		subtitle: {
			text: subtitle
		},
		 xAxis: {
			type: 'datetime',
			maxZoom: 24 * 3600000, // one days
			dateTimeLabelFormats: {
				second: '%H:%M:%S',
				minute: '%H:%M',
				hour: '%m-%e',
				day: '%m-%e',
				week: '%m-%e',
				month: '%m \'%y',
				year: '%Y'
			}
		 },
		 yAxis: {
			min: 0,
			allowDecimals: false,
			title: {
				text: ''
			},
			labels: {
				formatter: function() {
				   return this.value +'%';
				}
			}
		 },
	 	 plotOptions: {
			area: {
				stacking: 'percent',
				lineColor: '#ffffff',
				lineWidth: 1,
				marker: {
					lineWidth: 1,
					lineColor: '#ffffff'
				}
			}
		},
		tooltip: {
			crosshairs: {
				width: 2,
				color: 'gray',
				dashStyle: 'shortdot'
			},
	        shared: true,
			formatter: function() {
				var s = '<b style="line-height: 20px;">'+ Highcharts.dateFormat('%Y-%m-%d (', this.x) + getDay2(Highcharts.dateFormat('%a', this.x))+ ')</b>';
				
				$.each(this.points, function(i, point) {
					s += '<br><span style="line-height: 15px; color:'+ point.series.color + ' ">'+ point.series.name +': '+
						Highcharts.numberFormat(this.percentage, 1) +'% ('+ addCommas(this.y) + ")</span>";
				});	
				return s;
			}

		},					 
		series: []
	};



	$.each(legendData, function(i, value) {
		var series = {};
		series.pointInterval = 24 * 3600 * 1000;		
		series.pointStart = Date.UTC(xAxisData[0].substring(0,4), xAxisData[0].substring(5,7)-1,xAxisData[0].substring(8,10));
		series.name = value;
		series.data = yAxisData[i][valueType];
		options.series.push(series);
	});
	
	//趋势分析图表
	 var areaChart = new Highcharts.Chart(options);		
}